<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />

<title>Hello, world!</title>
<style>
.sjtp {
	height: 80px;
	width: 70px;
}

.zjtp {
	height: 220px;
	width: 240px;
	margin: 30px;
}
</style>
</head>
<body>
	<div>
		<img id="star" src="img/hulu.gif"
			style="height: 30px; width: 30px; position: absolute; z-index: 5; display: none;" />
	</div>
	<div>
		<span
			style="border: 1px solid black; position: absolute; z-index: 5; display: none;"
			class="bg-secondary text-white " id="pp">+1</span>
	</div>
	<div class="container">

		<div class="row">
			<div class="col-md-12">
				<%@include file="./common/header.jsp"%>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<!--导航栏-->
				<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

					<a class="navbar-brand" href="#">导航</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse"
						data-target="#navbarSupportedContent"
						aria-controls="navbarSupportedContent" aria-expanded="false"
						aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item "><a class="nav-link" href="#">首页 <span
									class="sr-only">(current)</span>
							</a></li>

							<li class="nav-item"><a class="nav-link" href="#">订单 <span
									class="sr-only">(current)</span>
							</a></li>

							<li class="nav-item active"><a class="nav-link" href="#">我的购物车
									<span class="sr-only">(current)</span>
							</a></li>

							<li class="nav-item dropdown "><a
								class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
								role="button" data-toggle="dropdown" aria-haspopup="true"
								aria-expanded="false"> 我的空间 </a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
									<a class="dropdown-item" href="#">登陆</a> <a
										class="dropdown-item" href="#">注册</a> <a class="dropdown-item"
										href="#">地址管理</a> <a class="dropdown-item" href="#">评论区</a> <a
										class="dropdown-item" href="#">统计图</a>
								</div></li>

						</ul>
						<form class="form-inline my-2 my-lg-0">
							<input class="form-control mr-sm-2" type="search"
								placeholder="请输入店家名称..." aria-label="Search">
							<button class="btn btn-outline-success my-2 my-sm-0"
								type="submit">搜索</button>
						</form>
					</div>
				</nav>
				<!--END导航栏-->
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<!--商家栏-->
				<div class="card mt-4">
					<div class="card-body p-1  bg-light text-dark ">
						<span style="font-size: 30px;">${shop.name}</span><br /> <img
							src="${initParam.imgs_shop}/${shop.img}" class="sjtp"> <span>营业时间：${shop.worktime}
							评分：${shop.score}</span>
						<!--显示-->
						<a href="buycars?shopid=${shop.id}">
							<button id="anniu" type="button"
								class="btn btn-warning float-right mr-4">
								购物车<span class="badge badge-light" id="sz">${allqty}</span>
							</button>
						</a>
						<!--END显示-->
					</div>
				</div>
				<!--END商家栏-->
			</div>
		</div>

		<div class="row mt-5">
			<div class="col-md-2">
				<ul class="text-primary  list-unstyled ml-5">
					<li class="my-2 "><a href="cheock?id=${shop.id}">今日特价</a></li>
					<c:forEach var="gtlist" items="${gtlist}">
						<li class="my-2 "><a
							href="cheock?id=${param.id}&typeid=${gtlist.id}">
								${gtlist.name}</a></li>
					</c:forEach>
				</ul>
			</div>
			<div class="col-md-6 ">
				<!--卡片框蛋肠-->
				<c:forEach var="good" items="${good}">
					<div class="card mb-3" style="max-width: 540px;">
						<div class="row no-gutters">
							<div class="col-md-7">
								<img src="${initParam.imgs_food}/${good.img}" alt="..."
									class="zjtp">
							</div>
							<div class="col-md-5">
								<div class="card-body">
									<h5 class="card-title cc">${good.name}</h5>
									<p class="card-text">详情：${good.depict}</p>
									<p class="card-text">
										<small class="text-muted gg">售价：${good.price}</small>
									</p>
									<p class="card-text">
										<small class="text-muted">月销量：${good.total}</small>
									</p>
									<p class="card-text">
										<small class="text-muted">包装费用：${good.packing}</small>
									</p>
									<button class="btn btn-primary mm"
										onclick="addcar(${good.id},${shop.id})">
										添加购物车 <span class="badge badge-light js" id="nz_${good.id}">${map[good.id]}</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
			<div class="col-md-4">
				<div class="row mt-5">
					<div class="col-md-12">
						<p style="font-size: 30px;">销售排行</p>
						<!--列表-->
						<ul class="list-group">
							<c:forEach var="good" items="${good}">
								<li class="list-group-item">${good.name}<span
									class="badge badge-primary float-right">${good.total}</span>
								</li>
							</c:forEach>
						</ul>
						<!--END列表-->
					</div>
				</div>
				<div class="row mt-4">
					<div class="col-md-12 ">
						<c:forEach var="good" items="${good}">
							<div class="card mb-3" style="max-width: 540px;">
								<div class="row no-gutters">
									<div class="col-md-5">
										<img src="${initParam.imgs_food}/${good.img}" alt="..."
											style="width: 140px; height: 100%;" class="rounded">
									</div>
									<div class="col-md-7">
										<div class="card-body p-0 pl-4">
											<h5 class="card-title ">${shop.name}</h5>
											<p class="card-text pr-4">${good.depict}</p>
										</div>
									</div>
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

	<!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
	<script src="/gll/js/jquery-3.2.1.min.js"></script>
	<script src="/gll/js/bootstrap.bundle.min.js"></script>
	<script>
	function addcar(gid,sid) {
		$.post("/gll/ajax/buy",{'goodid':gid,'shopid':sid},
			function(d,status,xhr){
				var login = xhr.getResponseHeader("melogin")
			 	//判断如果返回的是302重定向,就让整个页面跳转到指定的页面
			 	if(login){
			 		window.location.href = login;
			 		return;
			 	}
				$("#nz_"+gid).html(d.num);
				$("#sz").html(d.sum);					
		},"json");
	}		
	</script>
</body>
</html>